<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>商品详情页</title>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/detail.css" />
  </head>
  <body>
    <div class="header">
      <h1>商品详情页</h1>
      <a href="./list.html" class="back-link">回到列表页</a>
    </div>

    <div class="detail-container">
      <div class="product-info">
        <div class="product-header">
          <div class="product-image">
            <img id="productLogo" src="" alt="商品图片" />
          </div>
          <div class="product-meta">
            <h2 class="product-name">商品名称</h2>
            <div class="price-info">
              <div class="price-row">
                <span class="label">原价:</span>
                <span class="price">￥<span id="originalPrice"></span></span>
              </div>
              <div class="price-row">
                <span class="label">折扣:</span>
                <span class="discount" id="discount"></span>
              </div>
              <div class="price-row">
                <span class="label">现价:</span>
                <span class="current-price"
                  >￥<span id="currentPrice"></span
                ></span>
              </div>
            </div>
          </div>
        </div>
        <div class="product-detail" id="productDetail">
          <!-- 商品详情将通过JavaScript动态插入 -->
        </div>
      </div>
    </div>

    <script src="../lib/axios.min.js"></script>
    <script src="../lib/http.js"></script>
    <script src="../js/detail.js"></script>
  </body>
</html>
